<template>
  <div class="vibrator-monitor-container">
    <ScreenConditions :isDataType="false">
      <template slot="conditions">
        <a-select
          v-model="prodLineNum"
          showSearch
          allowClear
          placeholder="请选择生产线"
          @change="prodLineChange()"
          :loading="prodLineLoading"
        >
          <a-select-option
            :value="item.dicValue"
            v-for="item in prodLineSource"
            :key="item.id"
          >
            {{ item.dicDesc }}
          </a-select-option>
        </a-select>
        <a-select
          v-model="beamNo"
          placeholder="请选择梁号"
          @change="search"
          :loading="beamLoading"
          allowClear
          showSearch
        >
          <a-select-option
            :value="item"
            v-for="(item, index) in beamSource"
            :key="index"
          >
            {{ item }}
          </a-select-option>
        </a-select>
      </template>
      <template slot="operate">
        <a-button type="primary" @click="search"> 查询 </a-button>
        <a-button type="primary" @click="batchDownload()"> 数据下载 </a-button>
      </template>
    </ScreenConditions>
    <div class="table-container">
      <div class="header" header="振捣数据"></div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="dicDesc" title="生产线"> </vxe-column>
          <vxe-column field="componentParts" title="梁号"> </vxe-column>
          <vxe-column field="equName" title="振捣器名称"> </vxe-column>
          <vxe-column field="time" title="振捣时间(s)"> </vxe-column>
          <vxe-column field="startTime" title="振捣开始时间"> </vxe-column>
          <vxe-column field="endTime" title="振捣结束时间"> </vxe-column>
          <vxe-column field="frequency" title="振捣频率(Hz)"> </vxe-column>
          <vxe-column field="operate" width="180" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoDetails(row)">
                  数据明细
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 明细弹窗 -->
    <detailModal
      :visible.sync="detailModalVisible"
      :dataSource="rows"
    ></detailModal>
  </div>
</template>

<script>
import detailModal from "./components/detailModal";
import { getDickeyList } from "@/api/common.js";
import { downLoadFileByArraybuffer } from "@/utils";
import {
  getVibratePageList,
  getZDQBeamNoList,
  vibrateDownLoad,
} from "@/api/wisdom-beam/collect-app.js";

export default {
  components: {
    detailModal,
  },
  data() {
    return {
      detailModalVisible: false,
      rows: {},
      loading: false,
      //tabs
      activeKey: "",
      tabsSource: [],
      //列表
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      //梁号
      beamSource: [],
      beamLoading: false,
      beamNo: undefined,
      //生产线
      prodLineSource: [],
      prodLineNum: undefined,
      prodLineLoading: false,
    };
  },
  mounted() {
    this.getProdLine();
    this.getBeamNo();
    this.getTableData();
  },
  methods: {
    gotoDetails(row) {
      this.rows = row;
      this.detailModalVisible = true;
    },
    //数据下载
    batchDownload() {
      let { prodLineNum = "", beamNo = "" } = this;
      vibrateDownLoad({
        prodLineNum,
        componentParts: beamNo,
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "振捣数据");
        })
        .catch((_) => {});
    },
    //查询生产线
    getProdLine() {
      this.prodLineLoading = true;
      getDickeyList({ dictKey: "TASK_MANAGER_TZ" })
        .then((res) => {
          let { data } = res;
          this.prodLineSource = data?.result || [];
        })
        .catch((_) => {
          this.prodLineSource = [];
        })
        .finally((_) => {
          this.prodLineLoading = false;
        });
    },

    //查询梁号
    getBeamNo() {
      this.beamLoading = true;
      let { prodLineNum = "" } = this;
      getZDQBeamNoList({ prodLineNum })
        .then((res) => {
          let { data } = res;
          this.beamSource = data?.result || [];
        })
        .catch((_) => {
          this.beamSource = [];
        })
        .finally((_) => {
          this.beamLoading = false;
        });
    },
    prodLineChange() {
      this.beamNo = undefined;
      this.pager.page = 1;
      this.getBeamNo();
      this.getTableData();
    },
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { prodLineNum = "", beamNo = "" } = this;
      return new Promise((resolve, reject) => {
        getVibratePageList({
          page,
          pageSize,
          prodLineNum,
          componentParts: beamNo,
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.tableData = result?.records || [];
            this.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听分页
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.vibrator-monitor-container {
  box-sizing: border-box;
  height: 100%;
  .flex();
  flex-direction: column;
  padding: 0 10px 10px 10px;
  overflow: hidden;
  .table-container {
    margin-top: 10px;
    flex: 1;
    .flex();
    flex-direction: column;
    background-color: #fff;
    .header {
      padding: 28px 20px;
      background-color: #fff;
      box-sizing: border-box;
      .flex();
      justify-content: space-between;
      align-items: center;
      &::before {
        content: attr(header);
        height: 18px;
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        line-height: 18px;
      }
    }
    .main {
      flex: 1;
      height: 100%;
      .success {
        color: #4bc964;
      }
      .error {
        color: #ff3f4a;
      }
    }
    .pager-container {
      flex-shrink: 0;
    }
  }
}
</style>
